<template>
  <div class="wp100">
    <div class="item vm wp100">
    <div>
      <h5>
        <div class="vt">业绩排行</div>
        <zm-form
          inline
          :model="form"
          ref="searchForm"
          size="small"
          class="vm mt20 fr clear"
        >
          <zm-form-item label class="w180 mr10">
            <zm-data-select
              v-model="form.xAxis"
              :list="saleLabelType"
              placeholder="类型"
              class="w180"
              collapse-tags
              multiple
              str
              :multiple-limit="3"
              size="mini"
              @change="getChart"
            ></zm-data-select>
          </zm-form-item>
          <zm-form-item label class="w180 mr10">
            <zm-data-select
              v-model="form.rankType"
              :list="rankingType"
              placeholder="排行"
              class="w180"
              :clearable="false"
              size="mini"
              @change="getChart"
            ></zm-data-select>
          </zm-form-item>
          <zm-form-item label class="wp100 mr10">
            <zm-date-picker
              :start-date.sync="form.startTime"
              :end-date.sync="form.endTime"
              type="daterange"
              show-radio
              :default-choose-type="defaultChooseDateType"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              date-class="w220"
              range-separator="-"
              size="mini"
              @change="getChart"
              @on-change="getChart"
            >
            </zm-date-picker>
          </zm-form-item>
        </zm-form>
      </h5>
    </div>
    <div class="clear dataBox">
      <div id="echarts_box" :style="{width:'100%', height:'350px'}"></div>
    </div>
  </div>
  </div>
</template>
<script>
import datePickerMixin from '@/mixins/datePickerMixin'
import zmDatePicker from '@/components/ZmDatePicker'
import { rankInfo } from '@/api/src/workbench'
import { getData } from '@/utils/date'
import debounce from '@/utils/debounce'

import {saleLabelType, rankingType} from './const'

import echarts from 'echarts'
export default {
  components: { zmDatePicker },
  mixins: [datePickerMixin],
  data () {
    return {
      saleLabelType,
      rankingType,
      form: {
        xAxis: '1',
        rankType: '1',
        startTime: getData('prve7Days'),
        endTime: getData('today')
      },
      timeParentKey: 'form',
      defaultChooseDateType: ['prve7Days', 'prve14Days', 'prve30Days']
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getChart()
      window.addEventListener('resize', this.resizeChart)
    })
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    resizeChart: debounce(() => {
      let chart = document.getElementById('echarts_box')
      let echart = echarts.init(chart)
      echart.resize() // this.myChart1是初始化的图标实例
    }, 400),
    async getChart (val) {
      console.log(val, 'bbbbb')
      if (val && val.dateType) {
        this.form.startTime = val.joinTime[0]
        this.form.endTime = val.joinTime[1]
      }
      let sameObj = this.saleLabelType.filter(item =>
        this.form.xAxis.indexOf(item.value) > -1
      )
      // if (this.form.xAxis.length === 0) {
      //   this.$set(this.form, 'xAxis', '1')
      //   this.$message.error('至少留下一个选项')
      //   return
      // }
      const legendDataName = sameObj.map(item => {
        return item.name
      })

      var bgColorList = ['#fbd437', '#3aa1ff', '#4ecb73']
      const form = this.form
      let xAxisBool = this.form.xAxis instanceof Array
      let _xAxis
      if (xAxisBool) {
        _xAxis = this.form.xAxis.join(',')
      } else {
        _xAxis = this.form.xAxis
      }
      const interfaceData = await rankInfo({...form, ...{xAxis: _xAxis}})
      const axisLabel = interfaceData.map(item => {
        return item.name
      })
      var seriesValue = []

      for (var i = 0; i < legendDataName.length; i++) {
        var arrData = []
        var seriesDataVal = null
        for (var j = 0; j < axisLabel.length; j++) {
          arrData = interfaceData.map(item => {
            return item[sameObj[i].key] // sameObj[i].key 接口对应key的值
          })
        }
        seriesDataVal = {
          barWidth: 10, // 柱状条宽度
          name: legendDataName[i],
          type: 'bar',
          itemStyle: {
            normal: {
              show: true, // 鼠标悬停时显示label数据
              barBorderRadius: [10, 10, 10, 10], // 柱形图圆角，初始化效果
              color: bgColorList[i]
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          data: arrData
        }
        seriesValue.push(seriesDataVal)
      }
      this.$nextTick(() => {
        this.buildChart(legendDataName, axisLabel, seriesValue)
      })
    },
    buildChart (legendDataName, axisLabel, seriesValue) {
      var chart = document.getElementById('echarts_box')
      var echart = echarts.init(chart)
      var option = {
        title: {
          text: '', // 正标题
          x: 'center', // 标题水平方向位置
          y: '0', // 标题竖直方向位置
          textStyle: {
            fontSize: 18,
            fontWeight: 'normal',
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'// 阴影，若需要为直线，则值为'line'
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {show: false}
          }
        },
        legend: {
          data: legendDataName,
          y: 'bottom'// 图例说明文字设置

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: [{
          min: 0,
          type: 'category', // 纵向柱状图，若需要为横向，则此处值为'value'， 下面 yAxis 的type值为'category'
          data: axisLabel,
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        }],
        yAxis: [{
          min: 0,
          type: 'value',
          splitArea: {show: false}
        }],
        label: {
          normal: { // 显示bar数据
            show: true,
            position: 'top'
          }
        },
        series: seriesValue
      }

      echart.setOption(option, true)
    }
  }
}
</script>

<style scoped lang="scss">
.templateComtainer {
  margin-right: .42rem;
}
.item {
  height: 31.6rem;
  vertical-align: top;
  background: #fff;
  margin: 0.57rem 0.21rem 0.57rem 0;
  padding: 0.1rem 0.82rem 0.82rem 0.82rem;
  .clear {
    clear: both;
  }
  .dataBox {
    height: 20rem;
    overflow-x: auto;
    overflow-y: auto;
  }
}
#echarts_box {
  width: 41.53rem;
  height:20rem;
}
</style>
